<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <div slot="header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="ID" class="el-search-item">
              <el-input v-model="searchForm.customerId" placeholder="ID" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建时间" class="el-search-item">
              <el-date-picker v-model="checkedTime" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button type="success" plain icon="el-icon-search" @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button v-if='hasPerm("customer:customer:add")' type="primary" plain icon="el-icon-plus" @click="openAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%" v-loading="tableLoading" element-loading-text="数据正在加载中...">
          <el-table-column prop="customerId" label="用户" align="center" sortable></el-table-column>
          <el-table-column prop="toCustomerId" label="推广会员id" align="center" sortable></el-table-column>
          <el-table-column prop="regionPath" label="区域全路径" align="center" sortable></el-table-column>
          <el-table-column prop="urlName" label="域名后缀" align="center" sortable></el-table-column>
          <el-table-column prop="loginName" label="登录账号" align="center" sortable></el-table-column>
          <el-table-column prop="password" label="密码" align="center" sortable></el-table-column>
          <el-table-column prop="userName" label="姓名" align="center" sortable></el-table-column>
          <el-table-column prop="telephone" label="电话" align="center" sortable></el-table-column>
          <el-table-column prop="address" label="地址" align="center" sortable></el-table-column>
          <el-table-column prop="email" label="邮箱" align="center" sortable></el-table-column>
          <el-table-column prop="status" label="1激活 0失效" align="center" sortable></el-table-column>
          <el-table-column prop="lastLogingTime" label="最后登录时间" align="center" sortable></el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" sortable></el-table-column>
          <el-table-column prop="lastXfTime" label="最后续费时间" align="center" sortable></el-table-column>
          <el-table-column prop="regFrom" label="注册来源1pc 2android 3iso" align="center" sortable></el-table-column>
          <el-table-column prop="integral" label="积分(剩余积分)" align="center" sortable></el-table-column>
          <el-table-column prop="integralCount" label="总积分" align="center" sortable></el-table-column>
          <el-table-column prop="gold" label="金币" align="center" sortable></el-table-column>
          <el-table-column prop="level" label="会员等级" align="center" sortable></el-table-column>
          <el-table-column prop="locked" label="1锁定 0未锁定 登录超过次数" align="center" sortable></el-table-column>
          <el-table-column prop="longitude" label="经度" align="center" sortable></el-table-column>
          <el-table-column prop="latitude" label="纬度" align="center" sortable></el-table-column>
          <el-table-column prop="nearbyTime" label="获取经纬度时间" align="center" sortable></el-table-column>
          <el-table-column prop="language" label="语言编码" align="center" sortable></el-table-column>
          <el-table-column prop="birthday" label="生日" align="center" sortable></el-table-column>
          <el-table-column prop="sex" label="1男 2女 3其他" align="center" sortable></el-table-column>
          <el-table-column prop="headPortrait" label="头像地址" align="center" sortable></el-table-column>
          <el-table-column prop="telVersion" label="手机品牌型号" align="center" sortable></el-table-column>
          <el-table-column prop="promoteNum" label="推广员编码 谁推荐我安装的" align="center" sortable></el-table-column>
          <el-table-column prop="wxOpenId" label="微信openid 小程序" align="center" sortable></el-table-column>
          <el-table-column prop="wxgzhOpenId" label="公众号" align="center" sortable></el-table-column>
          <el-table-column prop="czTels" label="历史充值号码,号隔开" align="center" sortable></el-table-column>
          <el-table-column prop="unionid" label="单点登录标识" align="center" sortable></el-table-column>
          <el-table-column prop="qmImg" label="水印签名图片" align="center" sortable></el-table-column>
          <el-table-column prop="kpNo" label="开票识别码" align="center" sortable></el-table-column>
          <el-table-column prop="kpName" label="开票名称" align="center" sortable></el-table-column>
          <el-table-column prop="deleted" label="0未删除 1删除" align="center" sortable></el-table-column>
          <el-table-column v-if='hasPerm("customer:customer:list")' label="更多操作" align="center" width="250">
            <template slot-scope="scope">
              <el-button v-if='hasPerm("customer:customer:edit")' @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button v-if='hasPerm("customer:customer:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination style="padding:0;text-align: center;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                       :current-page="pageNum" :page-sizes="[10, 20, 30]" :page-size="pageSize" :total="total">
        </el-pagination>
      </el-card>
      <!--新增 编辑对话框-->
    <el-drawer :title="dialog.dialogTitle" :visible.sync="dialog.visible" :direction="dialog.direction" :size="dialog.size" :before-close="handleClose">
    <el-row class="drawer-table">
      <el-col :span="24">
        <el-form :rules="rules" ref="customerForm" :model="customerForm" size="small" label-width="80px">
          <el-form-item prop="customerId" label="用户">
            <el-input v-model="customerForm.customerId" placeholder="请输入用户" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="toCustomerId" label="推广会员id">
            <el-input v-model="customerForm.toCustomerId" placeholder="请输入推广会员id" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="regionPath" label="区域全路径">
            <el-input v-model="customerForm.regionPath" placeholder="请输入区域全路径" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="urlName" label="域名后缀">
            <el-input v-model="customerForm.urlName" placeholder="请输入域名后缀" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="loginName" label="登录账号">
            <el-input v-model="customerForm.loginName" placeholder="请输入登录账号" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="customerForm.password" placeholder="请输入密码" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="userName" label="姓名">
            <el-input v-model="customerForm.userName" placeholder="请输入姓名" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="telephone" label="电话">
            <el-input v-model="customerForm.telephone" placeholder="请输入电话" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="address" label="地址">
            <el-input v-model="customerForm.address" placeholder="请输入地址" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱">
            <el-input v-model="customerForm.email" placeholder="请输入邮箱" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="status" label="1激活 0失效">
            <el-input v-model="customerForm.status" placeholder="请输入1激活 0失效" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="lastLogingTime" label="最后登录时间">
            <el-input v-model="customerForm.lastLogingTime" placeholder="请输入最后登录时间" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="createTime" label="创建时间">
            <el-input v-model="customerForm.createTime" placeholder="请输入创建时间" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="lastXfTime" label="最后续费时间">
            <el-input v-model="customerForm.lastXfTime" placeholder="请输入最后续费时间" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="regFrom" label="注册来源1pc 2android 3iso">
            <el-input v-model="customerForm.regFrom" placeholder="请输入注册来源1pc 2android 3iso" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="integral" label="积分(剩余积分)">
            <el-input v-model="customerForm.integral" placeholder="请输入积分(剩余积分)" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="integralCount" label="总积分">
            <el-input v-model="customerForm.integralCount" placeholder="请输入总积分" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="gold" label="金币">
            <el-input v-model="customerForm.gold" placeholder="请输入金币" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="level" label="会员等级">
            <el-input v-model="customerForm.level" placeholder="请输入会员等级" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="locked" label="1锁定 0未锁定 登录超过次数">
            <el-input v-model="customerForm.locked" placeholder="请输入1锁定 0未锁定 登录超过次数" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="longitude" label="经度">
            <el-input v-model="customerForm.longitude" placeholder="请输入经度" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="latitude" label="纬度">
            <el-input v-model="customerForm.latitude" placeholder="请输入纬度" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="nearbyTime" label="获取经纬度时间">
            <el-input v-model="customerForm.nearbyTime" placeholder="请输入获取经纬度时间" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="language" label="语言编码">
            <el-input v-model="customerForm.language" placeholder="请输入语言编码" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="birthday" label="生日">
            <el-input v-model="customerForm.birthday" placeholder="请输入生日" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="sex" label="1男 2女 3其他">
            <el-input v-model="customerForm.sex" placeholder="请输入1男 2女 3其他" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="headPortrait" label="头像地址">
            <el-input v-model="customerForm.headPortrait" placeholder="请输入头像地址" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="telVersion" label="手机品牌型号">
            <el-input v-model="customerForm.telVersion" placeholder="请输入手机品牌型号" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="promoteNum" label="推广员编码 谁推荐我安装的">
            <el-input v-model="customerForm.promoteNum" placeholder="请输入推广员编码 谁推荐我安装的" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="wxOpenId" label="微信openid 小程序">
            <el-input v-model="customerForm.wxOpenId" placeholder="请输入微信openid 小程序" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="wxgzhOpenId" label="公众号">
            <el-input v-model="customerForm.wxgzhOpenId" placeholder="请输入公众号" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="czTels" label="历史充值号码,号隔开">
            <el-input v-model="customerForm.czTels" placeholder="请输入历史充值号码,号隔开" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="unionid" label="单点登录标识">
            <el-input v-model="customerForm.unionid" placeholder="请输入单点登录标识" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="qmImg" label="水印签名图片">
            <el-input v-model="customerForm.qmImg" placeholder="请输入水印签名图片" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="kpNo" label="开票识别码">
            <el-input v-model="customerForm.kpNo" placeholder="请输入开票识别码" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="kpName" label="开票名称">
            <el-input v-model="customerForm.kpName" placeholder="请输入开票名称" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="deleted" label="0未删除 1删除">
            <el-input v-model="customerForm.deleted" placeholder="请输入0未删除 1删除" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="drawer-footer">
      <el-col :span="24">
        <el-button @click="dialog.visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
      </el-col>
    </el-row>
    </el-drawer>

    </el-row>
  </div>
</template>
<script>
  import customer_customer from "@/api/customer/customer";
  export default {
    data() {
      return {
        // 表格数据
        tableData: [],
        tableLoading: false,
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 10,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
        checkedTime: '',
        // 查询参数
        searchForm: {customerId: null, startTime: null, endTime: null,},
        // 弹出层
        dialog: {flag: 0,dialogTitle: "",visible: false,direction: 'rtl',size: '35%'},
        // 表单参数
        customerForm: {
          customerId: null,
          toCustomerId: null,
          regionPath: null,
          urlName: null,
          loginName: null,
          password: null,
          userName: null,
          telephone: null,
          address: null,
          email: null,
          status: null,
          lastLogingTime: null,
          createTime: null,
          lastXfTime: null,
          regFrom: null,
          integral: null,
          integralCount: null,
          gold: null,
          level: null,
          locked: null,
          longitude: null,
          latitude: null,
          nearbyTime: null,
          language: null,
          birthday: null,
          sex: null,
          headPortrait: null,
          telVersion: null,
          promoteNum: null,
          wxOpenId: null,
          wxgzhOpenId: null,
          czTels: null,
          unionid: null,
          qmImg: null,
          kpNo: null,
          kpName: null,
          deleted: null,
        },
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          customerId: [{required: true,trigger: "change",message: "请输入用户"}],
          toCustomerId: [{required: true,trigger: "change",message: "请输入推广会员id"}],
          regionPath: [{required: true,trigger: "change",message: "请输入区域全路径"}],
          urlName: [{required: true,trigger: "change",message: "请输入域名后缀"}],
          loginName: [{required: true,trigger: "change",message: "请输入登录账号"}],
          password: [{required: true,trigger: "change",message: "请输入密码"}],
          userName: [{required: true,trigger: "change",message: "请输入姓名"}],
          telephone: [{required: true,trigger: "change",message: "请输入电话"}],
          address: [{required: true,trigger: "change",message: "请输入地址"}],
          email: [{required: true,trigger: "change",message: "请输入邮箱"}],
          status: [{required: true,trigger: "change",message: "请输入1激活 0失效"}],
          lastLogingTime: [{required: true,trigger: "change",message: "请输入最后登录时间"}],
          createTime: [{required: true,trigger: "change",message: "请输入创建时间"}],
          lastXfTime: [{required: true,trigger: "change",message: "请输入最后续费时间"}],
          regFrom: [{required: true,trigger: "change",message: "请输入注册来源1pc 2android 3iso"}],
          integral: [{required: true,trigger: "change",message: "请输入积分(剩余积分)"}],
          integralCount: [{required: true,trigger: "change",message: "请输入总积分"}],
          gold: [{required: true,trigger: "change",message: "请输入金币"}],
          level: [{required: true,trigger: "change",message: "请输入会员等级"}],
          locked: [{required: true,trigger: "change",message: "请输入1锁定 0未锁定 登录超过次数"}],
          longitude: [{required: true,trigger: "change",message: "请输入经度"}],
          latitude: [{required: true,trigger: "change",message: "请输入纬度"}],
          nearbyTime: [{required: true,trigger: "change",message: "请输入获取经纬度时间"}],
          language: [{required: true,trigger: "change",message: "请输入语言编码"}],
          birthday: [{required: true,trigger: "change",message: "请输入生日"}],
          sex: [{required: true,trigger: "change",message: "请输入1男 2女 3其他"}],
          headPortrait: [{required: true,trigger: "change",message: "请输入头像地址"}],
          telVersion: [{required: true,trigger: "change",message: "请输入手机品牌型号"}],
          promoteNum: [{required: true,trigger: "change",message: "请输入推广员编码 谁推荐我安装的"}],
          wxOpenId: [{required: true,trigger: "change",message: "请输入微信openid 小程序"}],
          wxgzhOpenId: [{required: true,trigger: "change",message: "请输入公众号"}],
          czTels: [{required: true,trigger: "change",message: "请输入历史充值号码,号隔开"}],
          unionid: [{required: true,trigger: "change",message: "请输入单点登录标识"}],
          qmImg: [{required: true,trigger: "change",message: "请输入水印签名图片"}],
          kpNo: [{required: true,trigger: "change",message: "请输入开票识别码"}],
          kpName: [{required: true,trigger: "change",message: "请输入开票名称"}],
          deleted: [{required: true,trigger: "change",message: "请输入0未删除 1删除"}],
        },
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
    },
    created() {
      this.getDataList();
    },
    watch: {
      "checkedTime"(value) {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
        if (value != null) {
          let timeArr = value.toString().split(",");
          timeArr.forEach((item,i) => {
            if(i === 0) {
              this.searchForm.startTime = item;
            }else {
              this.searchForm.endTime = item;
            }
          });
        }
      }
    },
    methods: {
      handleClose(done) {
        this.resetForm();
        done();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getDataList();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getDataList();
      },
      // 获取列表
      getDataList() {
        this.tableLoading = true;
        customer_customer.list({
          current: this.pageNum, size: this.pageSize, customerId: this.searchForm.customerId,
          startTime: this.searchForm.startTime, endTime: this.searchForm.endTime
        }).then(res => {
          if(res.data.code === 2000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
          this.tableLoading = false;
        });
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("customerForm");
        this.dialog.dialogTitle = "新增";
        this.dialog.visible = true;
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("customerForm");
        this.dialog.dialogTitle = "编辑";
        this.dialog.visible = true;
        this.getById(row.customerId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.customerForm.validate(valid => {
          if(valid){
            this.loading.status = true;
            customer_customer.saveOrUpdate(this.customerForm,this.dialog.flag).then(res => {
              if (res.data.code === 2000) {
                this.$message.success(res.data.msg);
                if(this.dialog.flag === 0){
                  this.pageNum = 1;
                }
                this.getDataList();
                // 关闭弹框
                this.dialog.visible = false;
                // 关闭加载
                this.loading.status = false;
              }else{
                this.$message.error(res.data.msg);
                this.loading.status = false;
                return false;
              }
            });
          }
        });
      },
      // 根据id获取信息
      getById(id) {
        customer_customer.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.customerForm.customerId = res.data.data.customerId;
            this.customerForm.toCustomerId = res.data.data.toCustomerId;
            this.customerForm.regionPath = res.data.data.regionPath;
            this.customerForm.urlName = res.data.data.urlName;
            this.customerForm.loginName = res.data.data.loginName;
            this.customerForm.password = res.data.data.password;
            this.customerForm.userName = res.data.data.userName;
            this.customerForm.telephone = res.data.data.telephone;
            this.customerForm.address = res.data.data.address;
            this.customerForm.email = res.data.data.email;
            this.customerForm.status = res.data.data.status;
            this.customerForm.lastLogingTime = res.data.data.lastLogingTime;
            this.customerForm.createTime = res.data.data.createTime;
            this.customerForm.lastXfTime = res.data.data.lastXfTime;
            this.customerForm.regFrom = res.data.data.regFrom;
            this.customerForm.integral = res.data.data.integral;
            this.customerForm.integralCount = res.data.data.integralCount;
            this.customerForm.gold = res.data.data.gold;
            this.customerForm.level = res.data.data.level;
            this.customerForm.locked = res.data.data.locked;
            this.customerForm.longitude = res.data.data.longitude;
            this.customerForm.latitude = res.data.data.latitude;
            this.customerForm.nearbyTime = res.data.data.nearbyTime;
            this.customerForm.language = res.data.data.language;
            this.customerForm.birthday = res.data.data.birthday;
            this.customerForm.sex = res.data.data.sex;
            this.customerForm.headPortrait = res.data.data.headPortrait;
            this.customerForm.telVersion = res.data.data.telVersion;
            this.customerForm.promoteNum = res.data.data.promoteNum;
            this.customerForm.wxOpenId = res.data.data.wxOpenId;
            this.customerForm.wxgzhOpenId = res.data.data.wxgzhOpenId;
            this.customerForm.czTels = res.data.data.czTels;
            this.customerForm.unionid = res.data.data.unionid;
            this.customerForm.qmImg = res.data.data.qmImg;
            this.customerForm.kpNo = res.data.data.kpNo;
            this.customerForm.kpName = res.data.data.kpName;
            this.customerForm.deleted = res.data.data.deleted;
          }
        });
      },
      // 根据id删除
      deleteFun(row) {
        this.$confirm("确定删除当前吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
            customer_customer.remove(row.customerId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList();
            }else {
              this.$message.error(res.data.msg);
            }
          });
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {margin-bottom: 0;}
  .el-card/deep/.el-card__body {padding: 0 10px 10px 10px !important;}
  .el-card/deep/.el-card__header {border-bottom: none !important;padding: 10px 10px !important;}
</style>